<!DOCTYPE html>
<!-- 
Template Name:  SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
Version: 4.0.0
Author: Sunnyat Ahmmed
Website: http://gootbootstrap.com
Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0
License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
-->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>
            Panels - UI Components - SmartAdmin v4.0.1
        </title>
        <meta name="description" content="Panels">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
        <!-- Call App Mode on ios devices -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Remove Tap Highlight on Windows Phone IE -->
        <meta name="msapplication-tap-highlight" content="no">
        <!-- base css -->
        <link rel="stylesheet" media="screen, print" href="../css/vendors.bundle.css">
        <link rel="stylesheet" media="screen, print" href="../css/app.bundle.css">
        <!-- Place favicon.ico in the root directory -->
        <link rel="apple-touch-icon" sizes="180x180" href="../img/favicon/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../img/favicon/favicon-32x32.png">
        <link rel="mask-icon" href="../img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    </head>
    <body class="mod-bg-1 ">
        <!-- BEGIN Page Wrapper -->
        <div class="page-wrapper">
            <div class="page-inner">
                <div class="page-content-wrapper">
                    <!-- BEGIN Page Content -->
                    <!-- the #js-page-content id is needed for some plugins to initialize -->
                    <main id="js-page-content" role="main" class="page-content">
                        <div class="subheader">
                            <h1 class="subheader-title">
                                <i class='subheader-icon fal fa-window'></i> Panels
                                <small>
                                    Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container
                                </small>
                            </h1>
                        </div>
                        <div class="alert alert-primary alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">
                                    <i class="fal fa-times"></i>
                                </span>
                            </button>
                            <span class="h5">About panels</span>
                            <br>
                            The <code>.panel</code> containers are a perfect vessle to display your data, tables, forms or pictures. They are extreamly lightweight and clean. They can be expanded to fullscreen, collapsed or closed. They come with varity of options to display your data uniquely and draw focus where it is needed. Print the panel you need by making it fullscreen. You can also uniform the panels by adding the modifier <code>.mod-panel-clean</code> to <code>body</code>
                            <br>
                            <br>
                            Give user access to create panel settings using localstorage. You can change colors, remember collapse state, lock location, and add drag functions to panels. Be sure to check out the our exclusive <a href="plugin_smartpanels.html" target="_blank">SmartPanels</a> plugin.
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                <div id="panel-1" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Default <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                All panels needs to have an unique ID in order to use the panel funtions. <code>.panel</code> is a container with no padding, <code>.panel-hdr</code> has a <code>min-height</code> value and default <code>flexbox</code> properties. The <code>.panel-toolbar</code> is inserted into <code>.panel-hdr</code> for extra elements. The <code>.panel-container</code> wraps <code>.panel-content</code> which has a predefined padding.
                                            </div>
                                            <p>
                                                Default panel text.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-2" class="panel panel-collapsed">
                                    <div class="panel-hdr text-success">
                                        <h2>
                                            Collapsed <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                                        </div>
                                    </div>
                                    <div class="panel-container collapse">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                This panel is closed by default. To close a panel we add the class <code>.panel-collapsed</code> to <code>.panel</code> and <code>.collapse</code> to <code>.panel-container</code>
                                            </div>
                                            <p>
                                                Default panel text.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-3" class="panel">
                                    <div class="panel-hdr color-success-600">
                                        <h2>
                                            Collapsable <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Panel is closed by using the attribute <code>data-action="panel-collapse"</code>, and can be placed anywhere inside <code>.panel</code>
                                            </div>
                                            <p>
                                                You can also place the collapse action inside the <code>.panel-content</code> as button or link
                                            </p>
                                            <button data-action="panel-collapse" class="btn btn-success mr-2">collapse button</button>
                                            <a href="javascript:void(0);" data-action="panel-collapse" class="text-success">collapse link</a>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-4" class="panel">
                                    <div class="panel-hdr color-warning-800">
                                        <h2>
                                            Fullscreen <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Panel is closed by using the attribute <code>data-action="panel-fullscreen"</code>, and can be placed anywhere inside <code>.panel</code>
                                            </div>
                                            <p>
                                                You can also place the fullscreen action inside the <code>.panel-content</code> as button or link
                                            </p>
                                            <button data-action="panel-fullscreen" class="btn btn-warning mr-2">fullscreen button</button>
                                            <a href="javascript:void(0);" data-action="panel-collapse" class="text-warning">fullscreen link</a>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-5" class="panel">
                                    <div class="panel-hdr text-danger">
                                        <h2>
                                            Close <span class="fw-300"><i>Panel</i></span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Panel is closed by using the attribute <code>data-action="panel-close"</code>, and can be placed anywhere inside <code>.panel</code>
                                            </div>
                                            <p>
                                                You can also place the fullscreen action inside the <code>.panel-content</code> as button or link
                                            </p>
                                            <button data-action="panel-close" class="btn btn-danger mr-2">close button</button>
                                            <a href="javascript:void(0);" data-action="panel-collapse" class="text-danger">close link</a>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-6" class="panel">
                                    <div class="panel-hdr bg-primary-700 bg-success-gradient">
                                        <h2>
                                            Panel <span class="fw-300">Colors</span>
                                        </h2>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                You can mix and match any color styles, below is what we were found to be an interesting match. Please note the colors will not be compatible with the modifier <code>.mod-panel-clean</code>
                                            </div>
                                            <div class="d-flex flex-wrap js-update-hdr-color">
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-primary-700 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-primary-700 bg-success-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-primary-500 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-primary-500 bg-info-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-primary-600 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-primary-600 bg-primary-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-info-600 bg-primray-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-info-600 bg-primray-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-info-600 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-info-600 bg-info-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-info-700 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-info-700 bg-success-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-success-900 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-success-900 bg-info-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-success-700 bg-primary-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-success-700 bg-primary-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-success-600 bg-success-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-success-600 bg-success-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-danger-900 bg-info-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-danger-900 bg-info-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-fusion-400 bg-fusion-gradient width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-fusion-400 bg-fusion-gradient" style="margin:1px;"></a>
                                                <a href="javascript:void(0);" class="btn d-inline-block bg-faded width-3 height-3 p-0 rounded-0 hover-effect-dot" data-class="bg-faded" style="margin:1px;"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-7" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Panel <span class="fw-300">master button</span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-toolbar-master" data-toggle="dropdown">
                                                <i class="fal fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-animated dropdown-menu-right">
                                                <button class="dropdown-item" data-action="panel-collapse">
                                                    Collapse
                                                </button>
                                                <button class="dropdown-item" data-action="panel-fullscreen">
                                                    Fullscreen
                                                </button>
                                                <div class="dropdown-divider m-0"></div>
                                                <button class="dropdown-item" data-action="panel-close">
                                                    Close
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                The <code>.btn-toolbar-master</code> button class is added to a dropdown button inside <code>.panel-toolbar</code>. It is a nice way to add dropdown functions and buttons to your <code>.panel</code>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div id="panel-8" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Label <span class="fw-300"><i>Panel</i></span>
                                            <sup>
                                                <span class="badge badge-warning ml-2">
                                                    sup
                                                </span>
                                            </sup>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <h5 class="m-0">
                                                <span class="badge badge-pill badge-danger fw-400 l-h-n">
                                                    11
                                                </span>
                                            </h5>
                                        </div>
                                        <div class="panel-toolbar ml-2">
                                            <h5 class="m-0">
                                                <span class="badge badge-primary fw-400 l-h-n">
                                                    Panel Badge
                                                </span>
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                You may place badge inside <code>.panel-toolbar</code>, <code>.panel-content</code> and <code>.panel-hdr</code>. Check out the <a href="ui_badges.html" target="_blank">badge page</a> to learn more about badges
                                            </div>
                                        </div>
                                        <!-- panel footer with utility classes -->
                                        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex">
                                            <span class="badge badge-info fw-400 mr-2">
                                                Footer badge
                                            </span>
                                            <span class="badge badge-pill badge-success fw-400">
                                                Pill badge
                                            </span>
                                            <span class="badge badge-pill rounded-circle badge-secondary fw-400 ml-auto mr-2">
                                                1
                                            </span>
                                            <span class="badge badge-warning fw-400 px-1">
                                                22
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-9" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Form <span class="fw-300">elements</span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <div class="custom-control d-flex custom-switch">
                                                <input id="eventlog-switch" type="checkbox" class="custom-control-input" checked="checked">
                                                <label class="custom-control-label fw-500" for="eventlog-switch"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                You can add form elements to <code>.panel-hdr</code> and any other parts of the <code>.panel</code>
                                            </div>
                                        </div>
                                        <!-- panel footer with utility classes -->
                                        <div class="panel-content d-flex py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="demoCheck">
                                                <label class="custom-control-label" for="demoCheck">Checkbox</label>
                                            </div>
                                            <div class="form-check-inline ml-auto">
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio1">1</label>
                                                </div>
                                            </div>
                                            <div class="form-check-inline">
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                                                    <label class="custom-control-label" for="customRadio2">2</label>
                                                </div>
                                            </div>
                                            <div class="form-check-inline mr-0">
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled="disabled">
                                                    <label class="custom-control-label" for="customRadio3">Disabled</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-10" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Form <span class="fw-300">inputs</span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <select class="custom-select custom-select-sm">
                                                <option selected="">Select</option>
                                                <option value="1">One</option>
                                                <option value="2">Two</option>
                                                <option value="3">Three</option>
                                            </select>
                                        </div>
                                        <div class="panel-toolbar ml-2">
                                            <div class="d-flex position-relative ml-auto" style="max-width: 8rem;">
                                                <i class="fal fa-search position-absolute pos-left fs-lg px-2 py-1 mt-1 fs-xs"></i>
                                                <input type="text" class="form-control form-control-sm pl-5" placeholder="Search">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                You can add form inputs to <code>.panel-hdr</code> with moderation. Adding too many elements may break the design on mobile viewport
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-11" class="panel">
                                    <div class="panel-hdr">
                                        <h2>
                                            Panel <span class="fw-300">buttons</span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-default btn-sm rounded-pill mr-1 shadow-0">
                                                <i class="fal fa-clock"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-secondary mr-1 shadow-0">
                                                <i class="fal fa-check"></i>
                                            </button>
                                            <button class="btn btn-icon btn-sm btn-success shadow-0 rounded-circle">
                                                <i class="fal fa-cog"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Add panel buttons to <code>.panel-hdr</code> and footer area. Keep in mind of your panel title size as distortion can occur with too many buttons overflowing.
                                            </div>
                                        </div>
                                        <!-- panel footer with utility classes -->
                                        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted">
                                            <ul class="pagination pagination-sm mb-0">
                                                <li class="page-item">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">«</span>
                                                    </a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#">1</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#">2</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#">3</a>
                                                </li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#" aria-label="Next">
                                                        <span aria-hidden="true">»</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-12" class="panel">
                                    <div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0">
                                        <h2>
                                            Panel <span class="fw-300">tabs</span>
                                        </h2>
                                        <div class="panel-toolbar pr-3 align-self-end">
                                            <ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#tab_default-1" role="tab">Home</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#tab_default-2" role="tab">Set</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled" data-toggle="tab" href="#" role="tab">Disabled</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <p>You can easily add <code>.nav-tabs</code> to <code>.panel-hdr</code>, consider adding dropdown panel button if you have a lot of panel tabs. Check out the Tabs & pills page for more details</p>
                                                <div id="js_change_tab_direction" class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
                                                    <label class="btn btn-info active" data-action="toggle" data-class="nav-tabs-clean" data-target="#demo_panel-tabs">
                                                        <input type="radio" name="radioNameTabDirection" checked="" value="nav nav-tabs"> default
                                                    </label>
                                                    <label class="btn btn-info" data-action="toggle" data-class="nav-tabs-clean" data-target="#demo_panel-tabs">
                                                        <input type="radio" name="radioNameTabDirection" value="nav nav-tabs justify-content-end"> clean
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-13" class="panel">
                                    <div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0">
                                        <h2>
                                            Panel <span class="fw-300">Pill</span>
                                        </h2>
                                        <div class="panel-toolbar pr-3">
                                            <ul class="nav nav-pills border-bottom-0" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#pill_default-1" role="tab">Home</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#pill_default-2" role="tab">Set</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link disabled" data-toggle="tab" href="#" role="tab">Disabled</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                <p>You can easily add <code>.nav-pills</code> to <code>.panel-hdr</code>, consider adding dropdown button if you have a lot of nav-pills. Check out the Tabs & pills page for more details</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-14" class="panel">
                                    <div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0">
                                        <h2>
                                            Panel <span class="fw-300">progress bars</span>
                                        </h2>
                                        <div class="progress progress-lg mr-3 width-sm rounded bg-warning-200">
                                            <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Progress bars can be added to <code>.panel-hdr</code> and footer area. You can also customize the colors to make it stand out
                                            </div>
                                        </div>
                                        <!-- panel footer with utility classes -->
                                        <div class="panel-content py-2 rounded-bottom border-faded border-left-0 border-right-0 border-bottom-0 text-muted">
                                            <div class="progress progress-sm w-100 shadow-inset-2">
                                                <div class="progress-bar bg-info-300 bg-info-gradient" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="panel-15" class="panel">
                                    <div class="panel-hdr text-primary">
                                        <h2>
                                            <span class="icon-stack fs-xxl mr-2">
                                                <i class="base base-7 icon-stack-3x opacity-100 color-primary-500"></i>
                                                <i class="base base-7 icon-stack-2x opacity-100 color-primary-300"></i>
                                                <i class="fal fa-cog icon-stack-1x opacity-100 color-white fa-spin"></i>
                                            </span>
                                            Icons
                                            <span class="fw-300">
                                                <i>Panel</i>
                                            </span>
                                        </h2>
                                        <div class="panel-toolbar">
                                            <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"><i class="fal fa-window-minimize"></i></button>
                                            <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"><i class="fal fa-expand"></i></button>
                                            <button class="btn btn-panel bg-transparent fs-xl w-auto h-auto rounded-0" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"><i class="fal fa-times"></i></button>
                                        </div>
                                    </div>
                                    <div class="panel-container collapse show" style="">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Easily replace panel buttons with icons using utility classes. Over 2500 icons to choose from
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>
                    <!-- this overlay is activated only when mobile menu is triggered -->
                    <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
                    <!-- BEGIN Page Footer -->
                    <footer class="page-footer" role="contentinfo">
                        <div class="d-flex align-items-center flex-1 text-muted">
                            <span class="hidden-md-down fw-700">2019 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
                        </div>
                        <div>
                            <ul class="list-table m-0">
                                <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
                                <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
                                <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
                                <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
                            </ul>
                        </div>
                    </footer>
                    <!-- END Page Footer -->
                    <!-- BEGIN Shortcuts -->
                    <!-- modal shortcut -->
                    <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <ul class="app-list w-auto h-auto p-0 text-left">
                                        <li>
                                            <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                    <i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Home
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="page_inbox_general.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-3x opacity-100 color-success-500 "></i>
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-success-300 "></i>
                                                    <i class="ni ni-envelope icon-stack-1x text-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Inbox
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                                <div class="icon-stack">
                                                    <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                                    <i class="fal fa-plus icon-stack-1x opacity-100 color-white"></i>
                                                </div>
                                                <span class="app-list-name">
                                                    Add More
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> <!-- END Shortcuts -->
                </div>
            </div>
        </div>
        <!-- END Page Wrapper -->
        <!-- base vendor bundle:
			 DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations 
						+ pace.js (recommended)
						+ jquery.js (core)
						+ jquery-ui-cust.js (core)
						+ popper.js (core)
						+ bootstrap.js (core)
						+ slimscroll.js (extension)
						+ app.navigation.js (core)
						+ ba-throttle-debounce.js (core)
						+ waves.js (extension)
						+ smartpanels.js (extension)
						+ src/../jquery-snippets.js (core) -->
        <script src="../js/vendors.bundle.js"></script>
        <script src="../js/app.bundle.js"></script>
        <script src="../js/lm/lm.js"></script>
        
        <script type="text/javascript">
            var userSelectColor = $('.js-update-hdr-color > [data-class]');
            $('.js-update-hdr-color > [data-class]').on('click', function()
            {
                var hdrColor = $(this).attr('data-class')
                $(this).parents('.panel').find('.panel-hdr').removeClass().addClass("panel-hdr " + hdrColor);
            })

        </script>
    </body>
</html>
